<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/element-ui.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/common.css" />
    <title>一般工程抗震设防审查情况</title>
    <style type="text/css">
        html, body, #commonproject {
            padding: 0px;
            margin: 0px;
            
        }
        #commonproject{
        	border-top: 3px solid #0D9AFF;
           	background: #FFFFFF;
            box-shadow: 0px 2px 4px 0 rgba(200,200,200,0.50);
            padding: 25px;
            background: url(./images/bg.png) no-repeat;
			background-size: cover;
			/*background-attachment: fixed;*/
            overflow: hidden;
        }
		.tab-title{
			font-size: 16px;
			font-weight: bold;
			border-left: 4px solid #0D9AFF;
			font-family: PingFangSC-Medium;
			padding-left:10px;
			margin-bottom: 20px;
		}
		.el-dialog__footer {
			padding: 10px 20px 20px;
			text-align: center;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
		}
		.el-dialog__body {
			color: rgb(96, 98, 102);
			font-size: 14px;
			word-break: break-all;
			padding: 0px 20px;
		}
		#excel {
		    display: none;
		}
		.el-input__inner {
		    -webkit-appearance: none;
		    background-color: #FFF;
		    background-image: none;
		    border-radius: 4px;
		    border: 1px solid #DCDFE6;
		    -webkit-box-sizing: border-box;
		    box-sizing: border-box;
		    color: #606266;
		    display: inline-block;
		    font-size: inherit;
		    height: 30px;
		    line-height: 30px;
		    outline: 0;
		    padding: 0 15px;
		    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
		    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
		    width: 100%;
		}
		.listed .el-form-item__label{
			letter-spacing: 3px;
		}
		.el-textarea {
			width: 95%;
		}	
    </style>
</head>

<body>
<div v-cloak id="commonproject">
	<div style="margin-top: 10px;">
		<el-form :model="commonproject" :rules="rules" ref="commonproject" label-width="140px">
			<!--建设工程情况-->
			<el-row>
				<el-col :span="4" class="tab-title">
					建设工程情况
				</el-col>	
			</el-row>
		  	<el-row>
		  		<el-col :span="18">
					<el-form-item label="项目名称:" prop="proName" label-width="110px">
					   	<el-input v-model="commonproject.proName" placeholder="" ></el-input>
					</el-form-item>
				</el-col>
			</el-row>
		  	<el-row>
				<el-col :span="18">
					<el-form-item label="项目地址:" prop="proAddress" label-width="110px">
						<el-input v-model="commonproject.proAddress" placeholder="" ></el-input>
					</el-form-item>
				</el-col>
	 		</el-row>
			<el-row>
			  	<el-col :span="24">
				   	<el-form-item label="建设内容:" prop="proContent" label-width="110px" :required="reRemarkRequired">
						<el-input
						  type="textarea"
						  :autosize="{ minRows: 8, maxRows: 8}"
						  placeholder="请输入建设内容"
						  v-model="commonproject.proContent">
						</el-input>
				  	</el-form-item>
				</el-col>
		  	</el-row>
		  	<!--建设单位信息-->
			<el-row>
				<el-col :span="4" class="tab-title">
					建设单位信息
				</el-col>	
			</el-row>
		  	<el-row>
		  		<el-col :span="12">
					<el-form-item label="单位名称:" prop="unitName" label-width="90px">
					   	<el-input v-model="commonproject.unitName" placeholder="" ></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="联系人:" prop="unitUser" label-width="110px">
					   	<el-input v-model="commonproject.unitUser" placeholder="" ></el-input>
					</el-form-item>
				</el-col>
		  		<el-col span="5">
				   	<el-form-item label="电话" prop="unitPhone" label-width="110px">
				   		<el-input v-model="commonproject.unitPhone" placeholder="" ></el-input>
				  	</el-form-item>
				</el-col>
	 		</el-row>
		  	<el-row>
			  	<el-col :span="18">
				  	<el-form-item label="营业执照号码或三证合一证照号码:" prop="unitCode" label-width="240px">				    	
				    	<el-input v-model="commonproject.unitCode" placeholder="" ></el-input>
					    </el-date-picker>
				  	</el-form-item>
			  	</el-col>
			  	<el-col :span="5">
				  	<el-form-item label="法人:" prop="unitLegal" label-width="110px">
						<el-input v-model="commonproject.unitLegal" placeholder="" ></el-input>
				  	</el-form-item>
			  	</el-col>
			</el-row>
		  	<!--一般工程抗震设防情况-->
			<el-row>
				<el-col :span="4" class="tab-title">
					一般工程抗震设防情况
				</el-col>	
			</el-row>
		  	<el-row>
		  		<el-col :span="6">
					<el-form-item label="抗震设防依据:" prop="earthquakeBasis" label-width="110px">
					   	<el-select v-model="commonproject.earthquakeBasis" placeholder="请选择监管结果">
							<el-option label="区划图" value="1"></el-option>
							<el-option label="小区划" value="2"></el-option>
							<el-option label="区域安全性评估" value="3"></el-option>
							<el-option label="其他" value="4"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
		  	</el-row>
		  	<el-row>
		  		<el-col :span="24">
					<el-form-item label="附件:" prop="" label-width="110px">
					   	<el-upload
						  	class="upload-demo"
						  	action="https://jsonplaceholder.typicode.com/posts/"
						  	:on-change="handleChange"
						  	:file-list="fileList">
						  	<el-button size="small" type="primary">点击上传</el-button>
						  	<!--<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
						</el-upload>
					</el-form-item>
				</el-col>
	 		</el-row>
			<!--项目填报信息-->
			<el-row>
				<el-col :span="4" class="tab-title">
					项目信息
				</el-col>	
			</el-row>
		  	<el-row>
		  		<el-col :span="6">
					<el-form-item label="填报日期:" prop="reCreateTime" label-width="110px">
					   	<el-date-picker
					      	v-model="commonproject.reCreateTime"
					      	type="date"
					      	placeholder="选择填报日期">
					    </el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="填报人员:" prop="reCreateUser" label-width="110px">
					   	<el-input v-model="commonproject.reCreateUser" placeholder="请输入填报人员" ></el-input>
					</el-form-item>
				</el-col>
			  	<el-col :span="6">
				  	<el-form-item label="填报部门:" prop="reCreateDepartment" label-width="110px">
					   	<el-input v-model="commonproject.reCreateDepartment" placeholder="请输入填报部门" ></el-input>
					</el-form-item>
			  	</el-col>
		  	</el-row>
		  	<el-row>
		  		<el-col :span="24">
					<el-form-item label="备注:" prop="reRemark" label-width="110px">
					   	<el-input
						  type="textarea"
						  :autosize="{ minRows: 8, maxRows: 8}"
						  placeholder=""
						  v-model="commonproject.reRemark">
						</el-input>
					</el-form-item>
				</el-col>
	 		</el-row>
 			<!--审核信息-->
			<el-row>
				<el-col :span="4" class="tab-title">
					审核信息
				</el-col>	
			</el-row>
		  	<el-row>
		  		<el-col :span="6">
					<el-form-item label="审核人员:" prop="checkUser" label-width="110px">
					   	<el-input v-model="commonproject.checkUser" placeholder="" ></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="审核人员机构:" prop="checkOrg">
					   	<el-input v-model="commonproject.checkOrg" placeholder="" ></el-input>
					</el-form-item>
				</el-col>
			  	<el-col :span="6">
				  	<el-form-item label="审核结果:" prop="checkResult" label-width="110px">				    	
				    	<el-select  v-model="commonproject.checkResult" placeholder="请选择">
							<el-option label="同意" value="1"></el-option>
							<el-option label="不同意" value="2"></el-option>
						</el-select>
				  	</el-form-item>
			  	</el-col>
		  	</el-row>
		  	<el-row>
		  		<el-col :span="24">
					<el-form-item label="审核意见:" prop="checkView" label-width="110px">
					   	<el-input
						  type="textarea"
						  :autosize="{ minRows: 8, maxRows: 8}"
						  placeholder="请输入内容"
						  v-model="commonproject.checkView">
						</el-input>
					</el-form-item>
				</el-col>
	 		</el-row>
	 		<el-row>
	 			<el-col :span="22">
			 		<div style="float:right;">
						<el-button type="primary" size="small" style="width: 60px;height: 30px;" @click="onSubmit">提交</el-button>
						<el-button type="info" size="small" style="width: 60px;height: 30px;" @click="">取消</el-button>
					</div>
				</el-col>
			</el-row>
		</el-form>
 	</div>
</div>
<script src="js/vue.js"></script>
<script src="js/element-ui.min.js"></script>
<script src="js/axios.min.js"></script>
<script>
    var vm = new Vue({
        el: '#commonproject',
        data() {
            return {
            	currentPage: 1, //默认显示页面为1
				pagesize: 5, // 每页的数据条数
				radio2:6,
				textarea3:'',
				fileList: [],
                registerForm: {
                    userName: "",
                    mobile: "",
                    email: "",
                    password: "",
                    password2: "",
                },
                commonproject : {
                  	proName:'',
                  	proAddress: '',
                  	proContent: '',
                  	unitName: '',
                  	unitUser: '',
                  	unitPhone: '',
                  	unitCode: '',
                  	unitLegal: '',
                  	earthquakeBasis: '',
                  	reCreateTime:'',
                  	reCreateUser:'',
                  	reCreateDepartment: '',
                  	reRemark:'',
                  	checkUser:'',
                  	checkOrg:'',
                  	checkResult: '',
                  	checkView: ''
			 	},
		 		rules: {
                    proName: [{
                        required: true,
                        message: '请输入项目名称',
                        trigger: 'blur'
                    }],
                    proAddress: [{
                        required: true,
                        message: '请输入项目地址',
                        trigger: 'blur'
                    }],
                    proContent: [{
                        required: true,
                        message: '请输入建设内容',
                        trigger: 'blur'
                    }],
                    unitName: [{
                        required: true,
                        message: '请输入单位名称',
                        trigger: 'blur'
                    }],
                    unitUser: [{
                        required: true,
                        message: '请输入联系人',
                        trigger: 'blur'
                    }],
                    unitPhone: [{
                        required: true,
                        message: '请输入电话',
                        trigger: 'blur'
                    }],
                  	unitCode: [{
                        required: true,
                        message: '请输入营业执照号码或三证合一证照号码',
                        trigger: 'blur'
                    }],
                    unitLegal: [{
                        required: true,
                        message: '请输入法人',
                        trigger: 'blur'
                    }],
                    earthquakeBasis: [{
                        required: true,
                        message: '请输入抗震设防依据',
                        trigger: 'blur'
                    }],
                    fujian: [{
                        required: true,
                        message: '请输入附件',
                        trigger: 'blur'
                    }],
                    reCreateTime: [{
                        required: true,
                        message: '请输入填报日期',
                        trigger: 'blur'
                    }],
                    reCreateUser: [{
                        required: true,
                        message: '请输入填报人员',
                        trigger: 'blur'
                    }],
                    reCreateDepartment: [{
                        required: true,
                        message: '请输入填报部门',
                        trigger: 'blur'
                    }],
                    reRemark: [{
                        required: false,
                        message: '请输入备注',
                        trigger: 'blur'
                    }],
                    checkUser: [{
                        required: true,
                        message: '请输入审核人员',
                        trigger: 'blur'
                    }],
                    checkOrg: [{
                        required: true,
                        message: '请输入审核人员机构',
                        trigger: 'blur'
                    }],
                    checkResult: [{
                        required: true,
                        message: '请输入审核结果',
                        trigger: 'blur'
                    }],
                    checkView: [{
                        required: true,
                        message: '请输入审核意见',
                        trigger: 'blur'
                    }]
                },
            }
            
        },
        methods: {           
            onSubmit() {
            	/* formData格式提交 */
            	let formData = new FormData();
            	for(var key in this.commonproject){
            		formData.append(key,this.commonproject[key]);
            	};
		      	axios({
		          	method: "post",
		          	url: "/generecord/add",
		          	data: this.commonproject,
                    enctype: 'multipart/form-data',
                    processData: false,
                    contentType: false
		        })
		        .then((res) => {
		          	console.log(res);
                    if (res.data.code == 200) {
                        // 提交成功将要执行的代码
                        this.$message({
                            message: '提交成功',
                            type: 'success'
                        });
                    }
		        }).catch(function (error) {
                    this.$message.error('网络超时, 请重新加载!')
                });
		    },
           	handleChange(file, fileList) {
		        this.fileList = fileList.slice(-3);
	      	}
        }
    })
</script>
</body>
</html>